<template>
    <div class="examinationPaper-increase" :class="!isMobile?'is-mobile-examinationPaper-increase':''">
        <div v-if="loadingData && !visibleResult" :class="!isMobile?'is-mobile-examinationPaper':''">
            <a-spin size="large" :spinning="spinning">
                <div class="paper-details">
                    <p>{{ testPaper.fsjmc }}</p>
                    <!-- <p>试卷类型：{{ testPaper.fsjlx }}</p> -->
                </div>
                <div class="big-question" v-if="singleChoiceList.length">
                    <span class="title-test-text" v-if="testPaper.fdanxtdbt">{{testPaper.fdanxtdbt}}</span>
                    <span class="title-test-text" v-else>一、单选题{{singleChoiceList.length}}道</span>
                    
                    <div class="subject-box">
                        <div v-for="(item,index) in singleChoiceList" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <!-- item.fxh + '.'+ -->
                            <div >
                                <a-radio-group
                                v-for="(nape,Nindex) in item.djdaList" 
                                :key="nape.id"
                                v-model:value="item.selectId"
                                @change="radioChange($event,nape,item)"
                                >
                                    <a-radio
                                    style="display:block;height:30px;lineHeight:30px" 
                                    :value="nape.id"
                                    >
                                    {{nape.fsjtmxx}}
                                    <!-- String.fromCharCode(64 + parseInt(nape.fxh)) -->
                                    </a-radio>
                                </a-radio-group>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="big-question" v-if="multipleChoice.length">
                    <span class="title-test-text" v-if="testPaper.fduoxtdbt">{{testPaper.fduoxtdbt}}</span>
                    <span class="title-test-text" v-else>二、多选题{{multipleChoice.length}}道</span>
                    <div class="subject-box">
                        <div v-for="(item,index) in multipleChoice" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <!-- item.fxh + '.'+ -->
                            <div >
                                <a-checkbox-group
                                v-for="(nape,Nindex) in item.djdaList" 
                                :key="nape.id"
                                v-model:value="item.selectArr"
                                @change="checkboxChange($event,nape,Nindex,item,index)"
                                >
                                    <a-checkbox :value="nape.id">{{nape.fsjtmxx}}</a-checkbox>
                                    <!-- String.fromCharCode(64 + parseInt(nape.fxh))+ -->
                                    <br/>
                                </a-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="big-question" v-if="determineList.length">
                    <span class="title-test-text" v-if="testPaper.fpandtdbt">{{testPaper.fpandtdbt}}</span>
                    <span class="title-test-text" v-else>三、判断题{{determineList.length}}道</span>
                    <div class="subject-box">
                        <div v-for="(item,index) in determineList" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <!-- item.fxh + '.'+ -->
                            <div >
                                <a-radio-group
                                v-for="(nape,Nindex) in item.djdaList" 
                                :key="nape.id"
                                v-model:value="item.selectId"
                                @change="radioChange($event,nape,item)"
                                >
                                    <a-radio
                                    style="display:block;height:30px;lineHeight:30px" 
                                    :value="nape.id"
                                    >
                                    {{nape.fsjtmxx}}
                                    <!-- String.fromCharCode(64 + parseInt(nape.fxh)) -->
                                    </a-radio>
                                </a-radio-group>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="big-question" v-if="subjectiveQuestions.length">
                    <span class="title-test-text" v-if="testPaper.fzhugtdbt">{{testPaper.fzhugtdbt}}</span>
                    <span class="title-test-text" v-else>四、主观题{{subjectiveQuestions.length}}道</span>
                    <div class="subject-box">
                        <div v-for="(item,index) in subjectiveQuestions" :key="item.id">
                            <span class="title-text-item"> {{item.fsjtm}}</span>
                            <!-- item.fxh + '.'+ -->
                            <div >
                                
                                <a-textarea
                                 style="width: 100% !important;" 
                                 v-model:value="item.fzgtnr" 
                                 @blur="subjectivityChange(item)" 
                                 placeholder="请输入答案" :rows="5" 
                                 :autosize="{ minRows: 1, maxRows: 100 }"
                                 />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="boot-btn">
                    <a-button style="width: 125px;" class="blue-btn" type="primary" :loading="confirmLoading" @click="submitTestPaper">提交</a-button>
                </div>
            </a-spin>
        </div>
        <div v-if="reload" style="display: flex;justify-content: center;">
            <a-button style="width: 125px;" class="blue-btn" type="primary" :loading="confirmLoading" @click="reloadClick">重新加载</a-button>
        </div>
        <a-modal
            class="test-paper-modal"
            v-model:visible="visibleResult"
            title=""
            :width="!isMobile?500:'100%'"
            wrapClassName="full-modal"
            :closable="false"
            :maskClosable="false"
            :footer="null"
            :dialog-style="{top:topNUm+'px'}"
            >
            <a-result
                style="padding: 0 !important;"
                :status="ksFlag == '通过'?'success':'info'"
                :title="ksFlag == '通过'?'恭喜您已完成本次考试':'您已完成本次考试，本次考试不合格'"
            >
            </a-result>
            <div v-if="importantData.btn == 1" style="text-align:center;">
                <a href="#" @click="returnClick">返回</a>
            </div>
        </a-modal>
    </div>
</template>
<script>
import {selectItemServe,answerSheetList,submitTestServe, updateDjtmZgt,spcyPxDjjbxxverifyDjhg} from './service/index'
import { Modal } from 'ant-design-vue';
export default {
    name:'',
    components:{
    },
    data(){
        return{
            spinning:true,
            confirmLoading:false,
            testPaper:{},//ftjsj
            singleChoiceList:[],//单选
            multipleChoice:[],//多选题
            determineList:[],//判断题
            subjectiveQuestions:[],//主观题
            loadingData:true,
            reload:false,
            key:'updatable',
            visibleResult:false,
            importantData:{
                signId:'',
                flxjhid:'',
            },
            ksFlag:'',
            topNUm:(window.innerHeight - 300) / 2,
        }
    },
    watch:{
    },
    mounted(){
        this.getAnswerSheetList(true)
        this.importantData = {
            btn:this.$route.query.btn,
            signId:this.$route.query.signId,
            flxjhid:this.$route.query.flxjhid,
        }
    },
    updated(){
        // this.cancelLoading()
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        reloadClick(){
            this.getAnswerSheetList(true)
        },
        getAnswerSheetList(val){
            if(val){
                this.loadingData = false
                this.$message.loading('正在加载中',this.key);
            }
            
            answerSheetList({id:this.$route.query.id}).then(res=>{
                if(res.code == 200 ){
                    this.visibleResult = res.result.djjbxx.ftjsj?true:false
                    if(this.visibleResult){
                        spcyPxDjjbxxverifyDjhg({id:this.$route.query.id}).then(res5=>{
                            if(res5.code == 200){
                                this.ksFlag = res5.result.flag
                            }
                        })
                    }
                    if(val){
                        this.loadingData = true
                        this.$message.success('加载成功', this.key)
                    }
                    this.cancelLoading()
                    //console.log('获取到试卷内容',res)
                    this.testPaper = res.result.djjbxx
                    this.singleChoiceList = res.result.danxList
                    this.determineList = res.result.pdtList
                    for (let item of res.result.danxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.singleChoiceList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.singleChoiceList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    for (let item of res.result.pdtList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        item.selectId = item[key][nape].id
                                    }
                                    let arr = this.determineList.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.determineList.push(item)
                                    }
                                }
                            }
                        }
                    }
                    res.result.duoxList = res.result.duoxList.map(i=>{return{selectArr:[],originalSelect:[],...i}} )
                    for (let item of res.result.duoxList) {//打印的item为数组中的每一个对象
                        for (let key in item) { //遍历数组中的对象
                            if(key==='djdaList'){
                                for(let nape in item[key]){
                                    if(item[key][nape].fsfxz==='是'){
                                        //console.log('item[key][nape].fsfxz===',item[key][nape].fsfxz==='是')
                                        item.selectArr.push(item[key][nape].id)
                                        item.originalSelect.push(item[key][nape].id)
                                    }
                                    let arr = this.multipleChoice.filter(e=>e.id===item.id)
                                    if(!arr.length){
                                        this.multipleChoice.push(item)
                                    }
                                }
                            }
                        }
                    }
                    this.subjectiveQuestions = res.result.zhugList
                }else{
                    if(val){
                        this.reload = true
                        this.$message.warning({ content: '加载失败', key:this.key })
                    }
                    
                }
            }).catch((err)=>{
                if(val){
                    this.reload = true
                    this.$message.warning({ content: '加载失败', key:this.key })
                    this.reload = true
                    this.$message.warning({ content: '加载失败', key:this.key })
                }
                
            })
            
        },
        radioChange(val,nape,item){//单选
            var data = {
                fdjtmid:item.id,
                fsfxz:'是',
                id:nape.id,

            }
            selectItemServe(data).then(res=>{
                this.getAnswerSheetList(false)
                if(res.code == 200){

                }else{
                    this.$message.warning('选择失败，请重新选择')
                }
            })
        },
        checkboxChange(val,nape,Nindex,item,index){//多选
            //console.log('当前项',this.multipleChoice[index].djdaList)
            //console.log('当前项',this.multipleChoice[index])
            //console.log('当前项',this.multipleChoice[index].selectArr)
            //console.log(nape)
            //console.log(this.multipleChoice[index].originalSelect)
            this.multipleChoice[index].selectArr = this.multipleChoice[index].originalSelect
            //console.log('当前项',this.multipleChoice[index].selectArr)
            if(this.multipleChoice[index].selectArr.indexOf(nape.id) !== -1){
                //console.log(this.multipleChoice[index].selectArr.indexOf(nape.id))
                //console.log('删除')
                this.multipleChoice[index].selectArr.splice(this.multipleChoice[index].selectArr.indexOf(nape.id),1)
            }else{
                //console.log('添加')
                this.multipleChoice[index].selectArr.push(nape.id)
            }
            //console.log(this.multipleChoice[index].selectArr)
            var data = {
                fdjtmid:item.id,
                fsfxz:this.multipleChoice[index].selectArr.indexOf(nape.id) === -1?'否':'是',
                id:nape.id,

            }
            selectItemServe(data).then(res=>{
                this.getAnswerSheetList(false)
                if(res.code == 200){

                }else{
                    // if(nape.fsfxz === '否'){
                    //     this.multipleChoice[index].selectArr.slice(0,this.multipleChoice[index].selectArr.typeOf(nape.id))
                    // }
                    // if(nape.fsfxz === '是'){
                    //     this.multipleChoice[index].selectArr.push(nape.id)
                    // }
                    this.multipleChoice[index].selectArr.push(nape.id)
                    this.$message.warning('选择失败，请重新选择')
                }
            })
        },
        subjectivityChange(item,index,id){//主观题
            var data = {
                id:item.id,
                fzgtnr:item.fzgtnr,

            }
            updateDjtmZgt(data).then(res=>{
                this.getAnswerSheetList(false)
                if(res.code == 200){

                }else{
                    // this.$message.warning('选择失败，请重新选择')
                }
            })
        },
        submitTestPaper(){
            var that = this
            // 验证提交答卷是否考试合格
            if(this.importantData.btn){
                spcyPxDjjbxxverifyDjhg({id:that.$route.query.id}).then(res=>{
                    if(res.code == 200){
                        if(res.result.flag == '通过'){
                            this.$confirm({
                                title:'您确认要提交吗？',
                                onOk() {
                                    that.confirmLoading = true
                                    submitTestServe({id:that.$route.query.id}).then(res=>{
                                        if(res.code == 200){
                                            that.getAnswerSheetList(false)
                                            that.confirmLoading = false
                                            that.$message.success('提交成功')
                                            
                                        }else{
                                            that.$message.warning(res.message)
                                            that.confirmLoading = false
                                        }
                                    })
                                },
                                
                            });
                        }else{
                            if(res.result.kscs && res.result.kscs !== 0){
                                this.$confirm({
                                    title:'您本次考试不合格，剩余'+res.result.kscs+'次补考机会，是否从新考试？',
                                    okText: '重新考试',
                                    cancelText: '放弃重考',
                                    onOk() {
                                        
                                    },
                                    onCancel() {
                                        that.confirmLoading = true
                                        submitTestServe({id:that.$route.query.id}).then(res=>{
                                            if(res.code == 200){
                                                that.getAnswerSheetList(false)
                                                that.confirmLoading = false
                                                that.$message.success('提交成功')
                                                
                                            }else{
                                                that.$message.warning(res.message)
                                                that.confirmLoading = false
                                            }
                                        })
                                    },
                                    
                                });
                            }else{

                            }
                            
                        }
                        
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }else{
                this.$confirm({
                    title:'您确认要提交吗？',
                    onOk() {
                        that.confirmLoading = true
                        submitTestServe({id:that.$route.query.id}).then(res=>{
                            if(res.code == 200){
                                that.getAnswerSheetList(false)
                                that.confirmLoading = false
                                that.$message.success('提交成功')
                                
                            }else{
                                that.$message.warning(res.message)
                                that.confirmLoading = false
                            }
                        })
                    },
                    
                });
            }
            
        },
        returnClick(){
            window.history.go(-1)
        },
    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */
.examinationPaper-increase{
    padding: 30px 0;
    height: 100vh;
    overflow-y:auto ;
 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .paper-details{
    text-align: center;
    font-size: 20px;
    font-weight: 600;
 }
 .big-question{
    margin: 20px 15px;
 }
 .title-test-text{
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 10px;
 }
 
 .ant-radio-group,.ant-checkbox-group {
    display: block !important;
}
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after{
    border-color:#2F54EB !important;
}
.ant-radio-disabled .ant-radio-inner:after {
    background-color: #2F54EB !important;
}


.boot-btn{
    display: flex;
    justify-content: center;
}
.test-paper-modal .ant-modal-header{
    display: none !important;
 }
 .test-paper-modal .ant-modal-footer{
    display: none !important;
 }
 .is-mobile-examinationPaper-increase{
    display: flex;
    justify-content: center;
    background-color: #f0f2f5;
    .is-mobile-examinationPaper{
        width: 500px;
        background-color: #fff;
        margin: 8px 0;
        height: calc(100vh - 16px);
        box-shadow: 0px 0px 11px rgba(158, 188, 229, 0.8);
        overflow: auto;
    }
 }
}
</style>